<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div class="box">演示全局选择器</div>
  <!-- <div class="rich-cont" v-html="content"></div> -->
  <h1 :class="$style.title">样式css的模块化写法</h1>
  <h1 :class="freeStyle.tit">样式css的模块化写法--自定义命名</h1>

  <h2 class="my-h2" @click="handleColor">演示样式中的v-bind</h2>
</template>

<script>
import { content } from "../mock/rich.js";
export default {
  data() {
    return {
      content,
      myColor: "rgb(255, 55, 00)",
    };
  },
  methods: {
    handleColor() {
      let r = Math.round(Math.random() * 255);
      let g = Math.round(Math.random() * 255);
      let b = Math.round(Math.random() * 255);
      this.myColor = `rgb(${r},${g},${b})`;
    },
  },
};
</script>

<style lang="scss" scoped>
// 深度选择器
.rich-cont :deep(img) {
  width: 100%;
}
// 全局选择器
:global(.box) {
  color: green;
  font-size: 50px;
}

// 在css中动态绑定数据
.my-h2 {
  color: v-bind(myColor);
}
</style>
<style module>
.title {
  color: greenyellow;
}
</style>
<style module="freeStyle">
.tit {
  color: rebeccapurple;
}
</style>
